<template>
  <div class="c-upload">
    <input
      ref="input"
      type="file"
      :accept="accept"
      style="display: none;"
      :multiple="multiple"
      @change="getUploadFile"
      :disabled="disabled"
    />
    <div
      class="image"
      :class="[imageUrl ? '' : 'dashed']"
      v-if="type === 'image'"
      @click="clickInput"
    >
      <img v-if="imageUrl" :src="imageUrl" alt="avatar" />
      <div v-else class="icon">
        <a-icon :type="loading ? 'loading' : 'plus'" />
      </div>
    </div>
    <a-button
      :disabled="disabled"
      v-if="type === 'button'"
      :type="buttonType"
      :ghost="ghost"
      @click="clickInput"
    >
      <a-icon type="upload" />
      {{ buttonName }}</a-button
    > <span class="colorMain" v-if="fileType=='application/vnd.openxmlformats-officedocument.wordprocessingml.document'&&fileName">{{fileName}}</span>
    <slot />
  </div>
</template>

<script>
export default {
  props: {
    type: {
      type: String,
      default: "button"
    },
    accept: {
      type: String,
      default: ""
    },
    buttonName: {
      type: String,
      default: "上传"
    },
    buttonType: {
      type: String,
      default: ""
    },
    ghost: {
      type: Boolean,
      default: false
    },
    multiple: {
      type: Boolean,
      default: false
    },
    disabled: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      imageUrl: null,
      fileType: "",
      fileName: "",
      loading: false
    };
  },
  created(){
    console.log(this.type)
  },
  methods: {
    //   模拟点击input
    clickInput() {
      this.$refs.input.click();
    },
    async getUploadFile(e) {
      let file;
      if (this.multiple) {
        file = e.target.files;
      } else {
        file = e.target.files[0];
        this.fileType = file.type
        this.fileName = file.name
      }
      if (file) {
        this.$emit("change", file);
        if (this.type === "image") {
          try {
            this.imageUrl = await this.loadImage(file);
          } catch (e) {
            // console.log(e)
          }
        }
      }
    },
    // 处理图片
    loadImage(file) {
      return new Promise((resolve, reject) => {
        let reader = new FileReader();
        reader.onload = function() {
          let dataURL = reader.result;
          resolve(dataURL);
        };
        reader.onerror = function() {
          reject(reader.error);
        };
        reader.readAsDataURL(file);
      });
    }
  }
};
</script>

<style lang="scss" scoped>
.c-upload {
  .image {
    padding: 3px;
    width: 128px;
    height: 128px;
    line-height: 128px;
    border: 1px solid #d9d9d9;
    border-radius: 4px;
    cursor: pointer;
    text-align: center;
    overflow: hidden;
    img {
      width: 100%;
      height: 100%;
    }
    .icon {
      height: 100%;
      font-size: 32px;
      color: #999;
      background-color: #fafafa;
    }
  }
  .image.dashed {
    border: 1px dashed #d9d9d9;
  }
}
</style>
